<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/PaymentApproval">付费审批管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>付费审批显示</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <table style="width: 80%;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    标题:<el-input v-model="form.paymentTitle" style="width: 200px" clearable />
                </td>
                <td>
                    付款日期:<el-date-picker v-model="form.paymentDate" value-forma="YYYY-MM-DD" style="width: 200px" type="date" clearable />
                </td>
                <td>
                    审批状态:<el-select v-model="form.approvalStatus" style="width: 200px" clearable>
                        <el-option label="待审批" :value="2" />
                        <el-option label="已通过" :value="3" />
                        <el-option label="已拒绝" :value="4" />
                    </el-select>
                </td>
            </tr>
            <tr>
                <td>
                    审批人:<el-input v-model="form.approver" style="width: 200px" clearable />
                </td>
                <td>
                    付款方式:<el-select v-model="form.billingMethod" style="width: 200px" clearable>
                        <el-option label="微信支付" value="微信支付" />
                        <el-option label="支付宝支付" value="支付宝支付" />
                        <el-option label="银联支付" value="银联支付" />
                        <el-option label="企业转账" value="企业转账" />
                        <el-option label="线下支付" value="线下支付" />
                        <el-option label="其他" value="其他" />
                    </el-select>
                </td>
                <td>
                    <!-- <div v-show="form.buttonArray.includes('getPaymentList')" class="table-operation"
                        style="margin-top: 8px;"> -->
                    <el-button type="primary" @click="getPaymentList()" :icon="Search">查询</el-button>
                    <!-- </div> -->

                    <!-- <div v-show="form.buttonArray.includes('reset')" class="table-operation" style="margin-top: 8px;"> -->
                    <el-button :icon="RefreshRight" @click="reset()">重置</el-button>
                    <!-- </div> -->
                </td>
            </tr>
        </tbody>
    </table>
    <el-radio-group v-model="form.approvalStatus" >
      <el-radio-button label="全部" @change="showStatus1" />
      <el-radio-button label="待审批" @click="showStatus2" />
      <el-radio-button label="已审批" @click="showStatus3" />
    </el-radio-group>
    <el-table :data="paymentList" border style="width: 100%;text-align: center;margin-top: 10px">
        <el-table-column prop="paymentTitle" label="标题" />
        <el-table-column prop="description" label="用途描述" />
        <el-table-column prop="paymentPrice" label="付款金额" />
        <el-table-column prop="billingMethod" label="付款方式" >
            <template v-slot="scope">
                <el-tag type="primary" v-if="scope.row.billingMethod == '微信支付'">微信支付</el-tag>
                <el-tag type="success" v-if="scope.row.billingMethod == '支付宝支付'">支付宝支付</el-tag>
                <el-tag type="info" v-if="scope.row.billingMethod == '银联支付'">银联支付</el-tag>
                <el-tag type="warning" v-if="scope.row.billingMethod == '企业转账'">企业转账</el-tag>
                <el-tag type="danger" v-if="scope.row.billingMethod == '线下支付'">线下支付</el-tag>
                <el-tag type="danger" v-if="scope.row.billingMethod == '其它'">{{ scope.row.otherBillingMethod }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="paymentMethods" label="支付对象" />
        <el-table-column prop="paymentBank" label="开户行" />
        <el-table-column prop="bankAccount" label="银行账户" />
        <el-table-column prop="paymentApplicant" label="申请人" />
        <el-table-column prop="paymentDate" label="付款日期">
            <template v-slot="scope">
                <span v-if="scope.row.paymentDate == null ? '' : scope.row.paymentDate">{{
                scope.row.paymentDate.substring(0, 10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="paymentRemark" label="备注">
            <template v-slot="scope">
                {{ scope.row.paymentRemark ? scope.row.paymentRemark : '-' }}
            </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间">
            <template v-slot="scope">
                <span v-if="scope.row.createdDate == null ? '' : scope.row.createdDate">{{
                scope.row.createdDate.substring(0, 16).replace("T", " ") }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态">
            <template v-slot="scope">
                <span v-if="scope.row.approvalStatus == 2">待审核</span>
                <span v-if="scope.row.approvalStatus == 3">审批通过</span>
                <span v-if="scope.row.approvalStatus == 4">审批拒绝</span>
            </template>
        </el-table-column>
        <el-table-column prop="approver" label="审批人">
            <template v-slot="scope">
                {{ scope.row.approver ? scope.row.approver : '-' }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="242">
            <template v-slot="scope">
                <!-- <div v-show="form.buttonArray.includes('jumpPayment')" class="table-operation" style="margin-top: 8px;"> -->
                <el-button v-if="scope.row.approvalStatus == 2" @click="jumpPayment(scope.row.paymentId)" type="primary"
                    size="small" link :icon="CircleCheckFilled">查看</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('jumpPaymentl')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button v-else @click="jumpPaymentl(scope.row.paymentId)" type="primary" size="small" link
                    :icon="CircleCheckFilled">查看</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('Approved')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button @click="Approved(scope.row.paymentId)" type="primary" size="small" link
                    :icon="CircleCheckFilled"
                    :disabled="scope.row.approvalStatus == 3 || scope.row.approvalStatus == 4">通过</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('ApprovalRejection')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button @click="ApprovalRejection(scope.row.paymentId)" type="primary" size="small" link
                    :disabled="scope.row.approvalStatus == 3 || scope.row.approvalStatus == 4"
                    :icon="CircleCheckFilled">拒绝</el-button>
                <!-- </div> -->
            </template>
        </el-table-column>
    </el-table>

    <table style="float: right;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="total, slot, prev, pager, next" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <span>,每页{{ form.pageSize }}条,共{{ form.pageIndex }}/{{ form.totalPage }}页</span>
                        <el-button class="btn-prev" :disabled="form.pageIndex == 1"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="slot, sizes,jumper" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <el-button class="btn-prev" :disabled="form.pageIndex == form.totalPage"
                            @click="handleCurrentChange(form.totalPage)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, CircleCheckFilled, CircleCloseFilled, RefreshRight } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const form = reactive({
    paymentTitle: '',
    paymentDate: '',
    approvalStatus: '',
    approver: '',
    billingMethod: '',
    companyID: '',
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    totalPage: 0,
    buttonArray: ['getPaymentList', 'reset', 'jumpPayment', 'Approved', 'ApprovalRejection', 'jumpPaymentl']
})

//根据菜单id查询按钮功能权限
const getRoleMenuFun = () => {
    axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
        params: {
            menuId: route.query.id
        }
    }).then(res => {
        // console.log(res);
        form.buttonArray = res.data.data
    }).catch(err => {
        console.log(err);

    })
}

//显示应付费   
const paymentList = ref([])
const getPaymentList = () => {
    axios.get("/jread/api/Payment/ShowPaymentApproval", {
        params: {
            PaymentTitle: form.paymentTitle,
            PaymentDate: form.paymentDate,
            ApprovalStatus: form.approvalStatus || 0,
            Approver: form.approver,
            BillingMethod: form.billingMethod,
            CompanyID: form.companyID,
            PageIndex: form.pageIndex,
            PageSize: form.pageSize,
        }
    })
        .then((res) => {
            paymentList.value = res.data.data.list
            form.totalCount = res.data.data.totalCount
            form.totalPage = res.data.data.totalPage
        })
        .catch((err) => {
            console.log(err)
        })
}

//分页
const handleSizeChange = (val: number) => {
    form.pageSize = val
    getPaymentList()
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val
    getPaymentList()
}

//显示全部
const showStatus1=()=>{
form.approvalStatus='';
getPaymentList();
}
//显示待审批
const showStatus2=()=>{
    form.approvalStatus=2;
    getPaymentList();
}
//显示已审批
const showStatus3=()=>{
    form.approvalStatus=3||4;
    getPaymentList();
}
//跳转审批页面
const jumpPayment = (paymentId: any) => {
    router.push({
        name: '/PaymentModel',
        query: {
            paymentId: paymentId
        }
    })
}
//跳转显示审批页面
const jumpPaymentl = (paymentId: any) => {

    router.push({
        name: '/PaymentModelLook',
        query: {
            paymentId: paymentId
        }
    })
}

//审批通过
const Approved = (paymentId: any) => {
    let data = {
        approvalResult: '通过',
        approver: localStorage.getItem('username'),
        approvalNotes: '',
        subgrantor: '',
        paymentId: paymentId,
    }
    axios.post('/swrite/api/Payment/ApprovalCreate', data)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success('审批通过')
                getPaymentList()
            }
        })
        .catch((err) => {
            console.log(err)
        })
}

//审批拒绝
const ApprovalRejection = (paymentId: any) => {
    let data = {
        approvalResult: '拒绝',
        approver: localStorage.getItem('username'),
        approvalNotes: '',
        subgrantor: '',
        paymentId: paymentId,
    }
    console.log(data)
    axios.post('/swrite/api/Payment/ApprovalCreate', data)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success('拒绝通过')
                getPaymentList()
            }
        })
        .catch((err) => {
            console.log(err)
        })
}


//重置查询条件
const reset = () => {
    form.paymentTitle = "";
    form.paymentDate = "";
    form.approvalStatus = "";
    form.approver = "";
    form.billingMethod = "";
    getPaymentList()
}


onMounted(() => {
    getPaymentList();
    getRoleMenuFun();
})
</script>